.key {
  @radio: 45px;
  height: @radio;
  width: @radio;
  display: inline-block;
  //opacity: .4;
  a {
    float: left;
    color: #aaa;
    font: 700 9pt arial;
    text-decoration: none;
    text-align: center;
    width: 44px;
    height: 41px;
    box-sizing: border-box;
    margin: 5px;
    //background: #eff0f2;
    border-radius: 4px;
    border-top: 1px solid #f5f5f5;
    box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9, 0 2px 3px #333;
    text-shadow: 0 1px 0 #f5f5f5;
    display: flex;
    justify-items: center;
    align-items: center;
    span {
      width: 100%;
    }
    &:hover,
    &:focus {
      color: #74777b;
    }
    &:active,
    .key_down {
      color: #888;
      //background: #ebeced;
      margin: 7px 5px 3px;
      box-shadow: inset 0 0 25px #ddd, 0 0 3px #333;
      border-top: 1px solid #eee;
    }
  }
}